<template>
  <transition name="slide-fade" mode="out-in">
    <teleport v-if="!isDestory" to="body">
      <div :class="containerClass" :style="containerStyle">
        <div class="content">
          <!-- icon -->
          <v-icon :icon="iconSymbol" :color="textColor" />
          <!-- 文字 -->
          <div class="txt" :style="{ color: textColor }">
            {{ content }}
          </div>
        </div>
      </div>
    </teleport>
  </transition>
</template>

<script lang="ts">
import { defineComponent, computed } from "vue";
import Icon from "@/components/Icon.vue";
export default defineComponent({
  name: "Message",
  components: {
    "v-icon": Icon,
  },
  props: {
    type: {
      type: String,
      default: "info",
      validator: (v: string) => ["success", "error", "warning", "info"].indexOf(v) !== -1,
    },
    lastTime: {
      type: Number,
      default: 2500,
    },
    content: {
      type: String,
      defualt: "这是一条提示信息",
    },
    isShow: {
      type: Boolean,
      default: false,
    },
    isLeave: {
      type: Boolean,
      defualt: false,
    },
    isEnter: {
      type: Boolean,
      default: false,
    },
    seed: {
      type: Number,
      default: 0,
    },
    isDestory: {
      type: Boolean,
      defualt: false,
    },
  },
  setup(props) {
    const transition = (matchup: any) => matchup[props.type];

    const iconSymbol = computed(() => {
      return transition({
        success: "icon-chenggong",
        error: "icon-shibai",
        warning: "icon-xianshi_jinggaotianchong",
        info: "icon-xinxi3",
      });
    });
    const textColor = computed(() => {
      return transition({
        success: "#3BC965",
        error: "#de3c3c",
        warning: "#eea832",
        info: "#909399",
      });
    });

    const containerStyle = computed(() => ({ top: `${props.seed * 70}px` }));
    const containerClass = computed(() => {
      const classes = ["message-container", 'v-blur', props.type];
      if (props.isShow) classes.push("isShow");
      if (!props.isShow) classes.push("hide");
      if (props.isEnter) classes.push("enter");
      if (props.isLeave) classes.push("leave");
      return classes;
    });
    return {
      iconSymbol,
      textColor,
      containerStyle,
      containerClass,
    };
  },
});
</script>

<style scoped>
.message-container {
  width: 400px;
  height: 50px;
  padding: 0 20px;
  border-radius: 10px;
  position: fixed;
  transition: all 0.25s ease-out;
  opacity: 0;
  z-index: 999;
  left: 50%;
  transform: translate(-50%, 20px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.isShow {
  opacity: 1;
}
.hide {
  opacity: 0;
}
.leave {
  top: 0;
}

.txt {
  margin-left: 10px;
  font-size: 15px;
}
.content {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
}
.info {
  background-color: rgba(235, 238, 245, 0.5);
  border: 1px solid #e5e8ee;
  color: #fff;
}
.success {
  background-color: rgba(231, 246, 227, 0.5);
  border: 1px solid #e3f1df;
}
.error {
  background-color: rgba(246, 236, 236, 0.5);
  border: 1px solid #f5e3e3;
}
.warning {
  background-color: rgba(248, 242, 236, 0.5);
  border: 1px solid #f3e5da;
}
.slide-fade-enter-active {
  transition: all .3s ease-out;
}

.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}
</style>